嵌套 >
    +
    ^

<main>
    <section></section>
    <section></section>
    <section></section>
</main>

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

默认tag生成


<!-- .container -->
<div class="container"></div>

<!-- ul>.item*2 -->
<ul>
    <li class="item"></li>
    <li class="item"></li>
</ul>

<!-- table>.row*2>.col*3 -->
<table>
    <tr class="row">
        <td class="col">a</td>
        <td class="col">b</td>
        <td class="col">c</td>
    </tr>
    <tr class="row">
        <td class="col">d</td>
        <td class="col">e</td>
        <td class="col">f</td>
    </tr>
</table>
<!-- a[xx="yy"] -->
<a href="" xx="yy"></a>
<!-- a:mail -->
<a href="mailto:812350401@qq.com">kk</a>

<!-- script:src -->
<script src=""></script>

<!-- meta -->
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

表单生成
<!-- form:get -->
<form action="" method="post">
    <input type="button" value="">
    <select name="" id="">
        <option value="a">fds</option>
        <option value="d">dfas</option>
        <option value="bd">af</option>
    </select>
</form>

<!-- input:b -->
<!-- button:submit -->
<!-- select>option*3 -->
<!-- select>[value="item$"]*3 -->
<select name="" id="">
    <option value="item1"></option>
    <option value="item2"></option>
    <option value="item3"></option>
</select>

xml生成
<!-- root[name="yangkai" lgdsjl="asfdy"]>player#$*2>age+sex+name -->
<root name="yangkai" lgdsjl="asfdy">
    <player id="1">
        <age></age>
        <sex></sex>
        <name></name>
    </player>
    <player id="2">
        <age></age>
        <sex></sex>
        <name></name>
    </player>
</root>

P10: CSS更简单
margin
padding








